.mainbox {

  .detailMsg {
    // display: none;
    z-index: 2;
    width: 60%;
    height: 98%;
    position: absolute;

    .detailMsg-head-fixed {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      margin: auto;
      width: 100%;
      height: 15%;
      background: #4472C4 url(../../images/line.png);
      background-image: linear-gradient(0deg, #0F3B79, #0F3B79);
      border-top-left-radius: 0.1rem;
      border-top-right-radius: 0.1rem;
      cursor: pointer;
      border: 2px solid #2a2b2d;
      border-bottom: none;
      box-shadow: 0px 5px 5px 2px #40628f;

      .title {
        height: 50%;
        color: rgba(255, 255, 255, 0.8);
        font-weight: bold;
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flex;
        display: flex;
        /* 09版 */
        -webkit-box-pack: center;
        /* 12版 */
        -webkit-justify-content: center;
        -moz-justify-content: center;
        -ms-justify-content: center;
        -o-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        /* 12版 */
        -webkit-align-items: center;
        -moz-align-items: center;
        -ms-align-items: center;
        -o-align-items: center;
        align-items: center;

        span {
          font-size: .25rem;
          ;
        }
      }

      .detailMsg-draw {
        img {
          position: absolute;
          right: 0%;
          top: 0%;
          height: 4%;
          min-height: 24px;
        }
      }

      .detailMsg-head {
        position: absolute;
        width: 100%;
        height: 50%;
        color: #4DDCFE;
        font-size: .225rem;
        font-weight: bold;
        line-height: 0.5rem;

        // border-bottom: 1px solid #44DFFF;
        ul {
          width: 100%;
          height: 100%;
          display: -webkit-box;
          display: -moz-box;
          display: -webkit-flex;
          display: flex;
          /* 09版 */
          -webkit-box-pack: space-evenly;
          /* 12版 */
          -webkit-justify-content: space-evenly;
          -moz-justify-content: space-evenly;
          -ms-justify-content: space-evenly;
          -o-justify-content: space-evenly;
          justify-content: space-evenly;
          -webkit-box-align: center;
          /* 12版 */
          -webkit-align-items: center;
          -moz-align-items: center;
          -ms-align-items: center;
          -o-align-items: center;
          align-items: center;
          padding: 0 0.1875rem;

          li {
            flex: 2;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            white-space: nowrap;
            width: 14%;
            background-color: #0F3B79;
            border: 2px solid #0F2C5B;
          }
        }
      }
    }

    .detailMsg-body {
      color: rgba(255, 255, 255, 0.7);
      position: absolute;
      top: 15%;
      left: 0;
      right: 0;
      margin: auto;
      width: 100%;
      max-height: 80%;
      background: #4472C4 url(../../images/line.png);
      // padding: 0 0.1875rem;
      background-image: linear-gradient(0deg, #0F3B79, #0F3B79);
      cursor: pointer;
      overflow-y: auto;
      padding-bottom: 0.2rem;
      scrollbar-width: none;
      border-left: 2px solid #2a2b2d;
      border-right: 2px solid #2a2b2d;
      border-bottom: 2px solid #2a2b2d;
      box-shadow: 0px 5px 5px 2px #40628f;

      .no-data {
        z-index: 2;
        color: white;
        text-align: center;
        border-radius: .0625rem;
        line-height: 3;
        height: 100%;
        // display: none;
        font-size: 0.25rem;
      }

      ul {
        width: 100%;
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flex;
        display: flex;
        /* 09版 */
        -webkit-box-pack: space-evenly;
        /* 12版 */
        -webkit-justify-content: space-evenly;
        -moz-justify-content: space-evenly;
        -ms-justify-content: space-evenly;
        -o-justify-content: space-evenly;
        justify-content: space-evenly;
        line-height: 0.5rem;
        padding: 0 0.1875rem;


        li {
          flex: 2;
          font-size: 0.2rem;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
          white-space: nowrap;
          width: 14%;
          border-left: 2px solid #0F2C5B;
          border-right: 2px solid #0F2C5B;
          border-bottom: 2px solid #0F2C5B;
        }

      }

    }

    .detailMsg-pagination {
      position: absolute;
      right: 0;
      width: 100%;
      text-align: right;
      background-color: #0F3B79;
      border-left: 1px solid #2a2b2d;
      border-right: 1px solid #2a2b2d;
      border-bottom: 1px solid #2a2b2d;
      border-bottom-left-radius: 0.1rem;
      border-bottom-right-radius: 0.1rem;
      box-shadow: 0px 8px 5px 2px #40628f;
    }

    .detailMsg-body::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
    }
  }

}

.panel {
  z-index: 1;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  height: 26%;
  border: 1px solid rgba(25, 186, 139, 0.17);
  background: rgba(255, 255, 255, 0.04) url(../../images/line.png);
  padding: 0px 0.1875rem;

  .title {
    // height: 16%;
    color: rgba(255, 255, 255, 0.8);
    font-weight: bold;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: flex;
    /* 09版 */
    -webkit-box-pack: center;
    /* 12版 */
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    /* 12版 */
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;

    span {
      font-size: .25rem;
    }
  }


  .no-data-1 {
    width: 40%;
    height: 40%;
    position: absolute;
    top: 12%;
    left: 0px;
    right: 0px;
    bottom: 0;
    margin: 0;
    margin: auto;
    background-color: #4472C4;
    color: white;
    text-align: center;
    border-radius: .0625rem;
    line-height: 3;
    // display: none;
    font-size: 0.25rem;
  }

  .panel-draw-1,
  .panel-draw-2,
  .panel-draw-3,
  .panel-draw-4 {
    color: #44DFFF;
    font-size: 0.21875rem;
    position: absolute;
    top: 2%;
    right: 0;
    // height: 12%;
    // text-align: right;
    padding: 0px 0.1875rem;

    ul {
      font-size: 0.21875rem;

    }

    select {
      // text-align: center;draw-
      // text-align-last:center;/* chrome不兼容问题*/
      color: #44DFFF;
      font-weight: bold;
      font-size: 0.3rem;
      background-color: transparent;
    }
  }

  .panel-head-1,
  .panel-head-2,
  .panel-head-3,
  .panel-head-4 {
    // height: .5rem;
    height: 12%;
    color: #44DFFF;
    font-size: .225rem;
    font-weight: bold;
    border-bottom: 1px solid #44DFFF;

    ul {
      height: 100%;
      display: -webkit-box;
      display: -moz-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
      /* 12版 */
      -webkit-align-items: center;
      -moz-align-items: center;
      -ms-align-items: center;
      -o-align-items: center;
      align-items: center;

      li {
        flex: 2;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        white-space: nowrap;

      }

    }

  }



  .panel-body-1,
  .panel-body-2,
  .panel-body-3,
  .panel-body-4 {
    position: relative;
    font-size: .2rem;
    overflow: hidden;

    color: rgba(255, 255, 255, 0.6);

    .panel-body-1-1,
    .panel-body-2-1,
    .panel-body-3-1,
    .panel-body-4-1 {
      position: absolute;
      width: 100%;

      ul {

        background-color: transparent;
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        /* 12版 */
        -webkit-align-items: center;
        -moz-align-items: center;
        -ms-align-items: center;
        -o-align-items: center;
        align-items: center;

        li {
          font-size: .2rem;
          flex: 2;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
          white-space: nowrap;
        }

      }
    }
  }






  h2 {
    height: 16%;
    line-height: 0.6rem;
    text-align: center;
    color: #40BDE0;
    font-size: 0.25rem;
    font-weight: 400;

  }

  .chart {
    // height: 3rem;
    height: 96%;
  }
}

.table1 {
  height: 37%;

  .title {
    height: 12%;
  }

  .panel-head-1 {}

  .panel-body-1 {
    height: 76%;

    .panel-body-1-1 {

      ul {
        li {}
      }
    }
  }
}

.table2 {
  .title {
    height: 20%;

  }

  .panel-head-2 {
    ul {
      li {
        flex: 4;
      }
    }
  }

  .panel-body-2 {
    height: 68%;

    .panel-body-2-1 {

      ul {
        li {
          flex: 4;
        }
      }
    }
  }
}

.panel-middle {
  .title {
    height: 18%;
  }

  .panel-head-3 {
    ul {
      li {
        flex: 4;
      }
    }
  }

  .panel-body-3 {
    height: 70%;

    .panel-body-3-1 {

      ul {
        li {
          flex: 4;


        }
      }
    }
  }
}

.line2 {
  .title {
    height: 14%;
  }

  .panel-head-4 {
    ul {
      li {
        flex: 3;

        &:last-child {
          flex: 4;
        }
      }

    }
  }

  .panel-body-4 {
    height: 74%;

    .panel-body-4-1 {
      ul {
        li {
          flex: 3;

          &:last-child {
            flex: 4;
          }
        }

      }
    }
  }
}

// .panel-middle {
//   // height: 26%;
//   // padding-top: 0.1875rem;
//   // padding-bottom: 0.1875rem;
// }

.pie {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: flex;
  height: 24%;
  /* 09版 */
  -webkit-box-pack: space-evenly;
  /* 12版 */
  -webkit-justify-content: space-evenly;
  -moz-justify-content: space-evenly;
  -ms-justify-content: space-evenly;
  -o-justify-content: space-evenly;
  justify-content: space-evenly;

  .pieOne,
  .pieTwo,
  .pieThree {
    width: 32%;
    height: 100%;

    .chart {
      width: 100%;
      height: 66%;
    }

    .pieTitleOne,
    .pieTitleTwo,
    .pieTitleThree {
      height: 34%;
      display: -webkit-box;
      display: -moz-box;
      display: -webkit-flex;
      display: flex;
      /* 09版 */
      -webkit-box-pack: center;
      /* 12版 */
      -webkit-justify-content: center;
      -moz-justify-content: center;
      -ms-justify-content: center;
      -o-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      /* 12版 */
      -webkit-align-items: center;
      -moz-align-items: center;
      -ms-align-items: center;
      -o-align-items: center;
      align-items: center;
      overflow: hidden;

      span {
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .225rem;
        font-weight: bold;
        color: rgba(255, 255, 255, 0.8);
      }
    }
  }

}

.line1 {
  height: 35%;

  .slider_main {
    position: relative;
    width: 200%;
    height: 100%;

    .lineOne,
    .lineTwo {
      position: absolute;
      width: 50%;
      height: 100%;
    }

    .lineOne {
      .lineTitleOne {
        position: absolute;
        top: 2%;
        left: 0;
        right: 0;
        margin: auto;
        text-align: center;
        color: rgba(255, 255, 255, 0.8);
        font-size: .25rem;
        font-weight: bold;
      }
    }

    .lineTwo {
      visibility: hidden;

      .lineTitleTwo {
        position: absolute;
        top: 2%;
        left: 0;
        right: 0;
        margin: auto;
        text-align: center;
        color: rgba(255, 255, 255, 0.8);
        font-size: .25rem;
        font-weight: bold;
      }
    }
  }
}

.bar {
  height: 35%;

  .barTitleOne {
    position: absolute;
    top: 2%;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    font-size: .25rem;
    font-weight: bold;

    p {
      text-align: center;
    }
  }
}

.line2 {
  //  padding: 0;
  height: 35%;

  .slider_main {
    position: relative;
    // width: 200%;
    height: 100%;

  }

  .chartline2,
  .chartline3 {
    // right: 0;
    // margin-right: 10px;
    position: absolute;
    width: 51%;
    height: 100%;

  }

  .chartline3 {
    visibility: hidden;
  }
}





.panel-middle {
  position: absolute;
  width: 100%;
  height: 26%;
  top: 27%;
}





@media screen and (max-width: 1280px) {

  html,
  body {



    .mainbox {
      .detailMsg {
        max-height: 600px;

        .detailMsg-head-fixed {


          .title {
            span {
              font-size: 0.92rem !important;
            }
          }

          .detailMsg-head {
            line-height: 1.8rem;

            ul {
              li {
                font-size: 0.84rem;
              }
            }
          }
        }

        .detailMsg-body {


          .no-data {
            font-size: 0.9rem;
          }

          ul {
            line-height: 1.8rem;

            li {
              font-size: 0.76rem;
            }
          }
        }
      }


      .pie {

        .pieOne,
        .pieTwo,
        .pieThree {

          .pieTitleOne,
          .pieTitleTwo,
          .pieTitleThree {
            span {
              font-size: 1rem;
              ;
            }
          }
        }
      }

      .column {
        .panel {

          .no-data-1 {
            font-size: 0.9rem;
          }

          .panel-draw-1,
          .panel-draw-2,
          .panel-draw-3,
          .panel-draw-4 {
            font-size: 0.8rem !important;

            select {
              font-size: 0.9rem !important;
            }
          }

          .panel-head-1,
          .panel-head-2,
          .panel-head-3,
          .panel-head-4 {
            font-size: 0.9rem !important;
          }

          .panel-body-1,
          .panel-body-2,
          .panel-body-3,
          .panel-body-4 {

            .panel-body-1-1,
            .panel-body-2-1,
            .panel-body-3-1,
            .panel-body-4-1 {
              ul {
                li {
                  font-size: 0.72rem !important;
                }
              }
            }
          }

          .content p {
            font-size: 0.9rem !important;
          }

          .title {
            span {
              font-size: 1rem;
            }
          }
        }

        .line1 {

          .lineTitleOne,
          .lineTitleTwo {
            font-size: 1rem;
          }
        }

        .bar {
          .barTitleOne {
            font-size: 1rem;
          }
        }
      }
    }
  }

}

@media screen and (max-width: 768px) {

  html {

    .mainbox {
      .detailMsg {
        .detailMsg-head-fixed {
          .detailMsg-draw {
            img {
              min-height: 18px;
            }
          }
        }
      }
    }
  }
}



@media screen and (min-width: 1920px) {

  html {
    font-size: 80px !important;

    .detailMsg {
      .detailMsg-body {
        .no-data {
          font-size: 0.22rem;
        }
      }
    }

    .panel {
      .pie {

        .pieOne,
        .pieTwo,
        .pieThree {

          .pieTitleOne,
          .pieTitleTwo,
          .pieTitleThree {
            span {
              font-size: .26rem;
              ;
            }
          }
        }
      }

      .no-data-1 {
        font-size: 0.22rem;
      }

      .panel-draw-1,
      .panel-draw-2,
      .panel-draw-3,
      .panel-draw-4 {
        font-size: 0.2rem !important;

        select {
          font-size: 0.3rem !important;
        }
      }

      .panel-head-1,
      .panel-head-2,
      .panel-head-3,
      .panel-head-4 {
        font-size: 0.24rem !important;
      }

      .panel-body-1,
      .panel-body-2,
      .panel-body-3,
      .panel-body-4 {

        .panel-body-1-1,
        .panel-body-2-1,
        .panel-body-3-1,
        .panel-body-4-1 {
          ul {
            li {
              font-size: 0.2rem !important;
            }
          }
        }
      }

      .title {
        span {
          font-size: .28rem !important;
        }
      }

      .content p {
        font-size: 0.25rem !important;
      }
    }

    .line1 {

      .lineTitleOne,
      .lineTitleTwo {
        font-size: .26rem !important;
      }
    }

    .bar {
      .barTitleOne {
        font: .26rem !important;
      }
    }
  }
}

@media screen and (min-width: 3840px) {

  html {
    font-size: 120px !important;


    .detailMsg {
      .detailMsg-head-fixed {
        height: 8%;

      }

      .detailMsg-body {
        top: 8%;
      }
    }

    .panel {

      .panel-body-1,
      .panel-body-2,
      .panel-body-3,
      .panel-body-4 {

        .panel-body-1-1,
        .panel-body-2-1,
        .panel-body-3-1,
        .panel-body-4-1 {
          ul {
            li {
              font-size: 0.18rem !important;
            }
          }
        }
      }
    }
  }
}


@media screen and (width: 1680px) {
  html {
    .panel {

      .panel-body-1,
      .panel-body-2,
      .panel-body-3,
      .panel-body-4 {

        .panel-body-1-1,
        .panel-body-2-1,
        .panel-body-3-1,
        .panel-body-4-1 {
          ul {
            li {
              font-size: 0.18rem !important;
            }
          }
        }
      }
    }
  }
}

@media screen and (width: 1440px) {

  html {
    .detailMsg {
      .detailMsg-body {
        .no-data {
          font-size: 0.22rem !important;
        }
      }
    }

    .panel {
      .no-data-1 {
        font-size: 0.22rem !important;
      }
    }
  }
}

@media screen and (width: 1366px) {

  html {
    .detailMsg {
      .detailMsg-body {
        .no-data {
          font-size: 0.22rem !important;
        }
      }
    }

    .panel {
      .no-data-1 {
        font-size: 0.22rem !important;
      }
    }
  }
}